<template>
  <div>
    <el-header :class="isCollapse ? 'header' : 'headerno'"
      >金 Ele+Vue 开发版</el-header
    >
    <el-aside :width="isCollapse ? '64px' : '250px'">
      <el-menu
        background-color="#191A23"
        text-color="#fff"
        active-text-color="#ffd04b"
        class="el-menu-vertical-demo"
        :default-active="'/home'"
        :collapse="isCollapse"
        :collapse-transition="false"
        @select="handleSelect"
        @open="handleOpen"
        @close="handleClose"
      >
        <li class="aside-div" v-show="isCollapse ? false : true">
          <div class="aside-div-one">
            <el-avatar
              :size="60"
              src="squareUrl"
              style="width: 100%; height: 100%; float: left"
            >
              <img :src="userImg" />
            </el-avatar>
          </div>
          <div class="aside-div-two">
            <div
              style="
                width: 100%;
                height: 25px;
                border: 0px solid white;
                color: white;
              "
              slot="title"
            >
              <span style="margin-top: -88px; position: absolute"
                >My System</span
              >
            </div>
            <div style="width: 100%; height: 25px">
              <div class="aside-div-three">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="Profile"
                  placement="top"
                >
                  <i class="el-icon-user-solid"></i>
                </el-tooltip>
              </div>
              <div class="aside-div-four">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="Mail"
                  placement="top"
                >
                  <i class="el-icon-s-finance"></i>
                </el-tooltip>
              </div>
              <div class="aside-div-four">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="Setting"
                  placement="top"
                >
                  <i class="el-icon-s-tools"></i>
                </el-tooltip>
              </div>
              <div class="aside-div-four">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="Logout"
                  placement="top"
                >
                  <i class="el-icon-s-comment"></i>
                </el-tooltip>
              </div>
            </div>
          </div>
        </li>
        <NavMenu :navMenus="totalList"></NavMenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
  import config from "../router/config";
  import NavMenu from "./Menulist";
  import { mapState} from 'vuex';
  export default {
      computed: {
            ...mapState({
                current: state => state.tab.currentMenu,
            }),
            isCollapse() {
             return this.$store.state.tab.isCollapse
            }
        },
        data() {
            return {
                userImg: require('../assets/img/20220127001.jpg'),
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                totalList: [],
                
            }
        },
      methods: {
        handleOpen(key, keyPath) {
           console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
           console.log(key, keyPath);
        },
        handleSelect(key, keyPath) {
        this.$router.push({
          path: key,
          params: { data: 'query' }
        })
      },
      },
      components: {
        NavMenu
     },
     created() {
      this.totalList = config;
     },

    }
</script>
<style scoped>
@import "../assets/css/index.less";
</style>